import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { LeftOutline } from "antd-mobile-icons";
import { Search, Toast } from "react-vant";
import Navbar from "../../../components/Navbar/Index"; //引入全局自定义导航组件
import MyMap from "./components/Map";
import ZuMap from "./components/ZuMap";

import styles from "./style.module.css";

// import styles from "./style.module.scss";
import buyHouse from "../../../static/map_find_house/buy.png";
import zuHouse from "../../../static/map_find_house/zu.png";
import Screen from "../../../components/Screen/index";
// tab数组数据
const houseArr = [
  {
    title: "买房",
    img: buyHouse,
  },
  {
    title: "租房",
    img: zuHouse,
  },
];
// 地图组件数组
const mapArr = [
  {
    com: MyMap,
    key: 0,
  },
  {
    com: ZuMap,
    key: 1,
  },
];
// 筛选数组数据
const screenArr = ["区域", "价格", "距离", "户型"];
const MapFindHouse = () => {
  useEffect(() => { }, []);
  let navigate = useNavigate();
  const [value, setValue] = useState(""); //搜索值
  const [activeTab, setActiveTab] = useState(0); //tab切换租房买房

  //点击买房/租房切换
  const clickTab = (index) => {
    setActiveTab(index);
  };
  //点击筛选
  const clickScreen = (e) => {
    console.log(e);
  };
  return (
    <div className={styles.page_map}>
      <Navbar
        title={<div>地图找房</div>}
        nav_left={
          <div
            style={{
              position: "fixed",
              left: "15px",
            }}
            onClick={() => navigate(-1)}
          >
            <LeftOutline fontSize={"16px"} />
          </div>
        }
        nav_footer={<div style={{ height: "30px" }}></div>}
      />
      <div className={styles.filter_box}>
        <div className={styles.search_box}>
          <div className={styles.local}>北京</div>
          <Search
            value={value}
            onChange={setValue}
            placeholder="请输入搜索关键词"
          />
        </div>
        <div className={styles.tab_box}>
          {houseArr.map((item, index) => {
            return (
              <div key={index} onClick={() => clickTab(index)}>
                <img src={item.img} alt="" />
                <span className={index == activeTab ? styles.active_tab : ""}>
                  {item.title}
                </span>
              </div>
            );
          })}
        </div>
        <div className={styles.screen}>
          {screenArr.map((item, index) => {
            return (
              <div key={index}>
                <div>{item}</div>
                <div className={styles.triangle}></div>
              </div>
            );
          })}
        </div>
        <div className={styles.map_box}>
          {activeTab === 0 ? <MyMap /> : <ZuMap />}
          <MyMap />
        </div>
      </div>
    </div>
  );
};

export default MapFindHouse;
